<template>
  <div>
    <div class="kflexc" style=" padding: 20px;">
      <div class="lia" :class="search.type==0?'acts':'' " @click="changetype(0)">我的订单</div>
      <div class="lia" :class="search.type==1?'acts':'' " @click="changetype(1)">分销订单</div>
    </div>
    <div class="kflexc" style=" padding:0 20px 0px;">
      <el-select clearable v-model="search.product_ids" multiple clearable collapse-tags style="width: 250px; margin-bottom: 20px;" filterable placeholder="产品名称&编码">
        <el-option  v-for="item in xialajihe.allprolist" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <el-select clearable v-model="search.order_pages_short_ids" multiple clearable collapse-tags style="width: 250px; margin-bottom: 20px;" filterable placeholder="商品名称&编码">
        <el-option :key="item.id" :label="item.title" :value="item.id" v-for="item in xialajihe.shoplists"></el-option>
      </el-select>

      <el-input v-model="search.supplier_name" style="width: 250px; margin-bottom: 20px;" placeholder="所属渠道&供应商"></el-input>

      <el-date-picker style="width: 370px; margin-right: 20px; margin-bottom: 20px;" v-model="times" @change="timechange" value-format="yyyy-MM-dd HH:mm:ss" type="monthrange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

      <el-select  v-model="search.cm_name" style="width: 250px; margin-bottom: 20px;" placeholder="选择客户经理" filterable clearable v-show="search.type == 1">
        <el-option :label="item.name" :value="item.id"  v-for="item in xialajihe.kehujinglilists" :key="item.id" ></el-option>
      </el-select>

      <el-select clearable v-model="search.merchant_name" style="width: 250px; margin-bottom: 20px;" filterable multiple collapse-tags placeholder="选择分销商"  v-show="search.type == 1">
        <el-option :label="item.name" :value="item.child_shop_id"  v-for="item in xialajihe.fenxiaoshanglists" :key="item.child_shop_id" ></el-option>
      </el-select>

      <el-button type="danger" style=" margin-bottom: 20px;" @click="sousuo()">搜索</el-button>
    </div>

    <div style="margin:0 20px 20px;" v-loading="loading">
      <el-table :data="list" border style="width: 100%; " ref="multipleTable">
        <el-table-column align='center' prop='each_month' label="日期"></el-table-column>
        <!-- <el-table-column align='center' prop='final_commission' label="所属渠道&供应商"></el-table-column> -->
        <el-table-column align='center' prop='order_count' label="订单数量"></el-table-column>
        <el-table-column align='center' label="发货数量" prop='shipment_count'></el-table-column>
        <el-table-column align='center' prop='active_count' label="激活数量"></el-table-column>
        <el-table-column align='center' prop='recharged_count' label="激活且充值"></el-table-column>
        <el-table-column align='center' prop='confirm_income_count' label="收入确认数量"></el-table-column>
        <el-table-column align='center' prop='sale_income' label="销售收入"></el-table-column>
        <el-table-column align='center' prop='estimated_income' label="预估佣金收入"></el-table-column>
        <el-table-column align='center' prop='confirm_income_money' label="佣金收入"></el-table-column>
        <el-table-column align='center' prop='commission_expenses' label="佣金支出"></el-table-column>
        <el-table-column align='center' prop='fanli_money' label="返利支出"></el-table-column>
        <el-table-column align='center' prop='operating_costs' label="推广支出"></el-table-column>
        <el-table-column align='center' prop='estimated_revenue' label="预估毛利润"></el-table-column>
        <el-table-column align='center' prop='real_revenue' label="实际毛利润"></el-table-column>
        <el-table-column align='center' label="操作">
          <template slot-scope="scope">
            <el-button type="text"  @click="daochu(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="search.page"
        @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination> -->
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "yongjin",
    data() {
      return {
        list:[],
        loading:true,
        times:[],
        xialajihe: {
          allprolist: [],
          shoplists: [],
          fenxiaoshanglists:[],
          kehujinglilists:[]
        },
        search: {
          order_pages_short_ids: "", //商品名称 传商品id 多个以逗号隔开
          product_ids: "", //产品名称 传产品id 多个以逗号隔开
          supplier_name: "", //所属产品或渠道 自己输入
          start_month: "", // 开始月份 例 2025-05
          end_month: "", //结束月份 例 2025-05
          type: 0, //0 我的 1分销商
          merchant_name: "", //分销商 传分销商id 【分销商才有用】
          cm_name: "", //
        }
      }
    },
    created() {
      this.getlist()
      //获取所有产品
      axios.get("/api/gth/products?status=100&_page_size=2000")
        .then(response => {
          if (response.data.msg.code == 0) {
            this.xialajihe.allprolist = response.data.data.data
          }
        })
      //获取商品
      axios.get('/api/gth/order-pages2?_page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.xialajihe.shoplists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      //获取客户经理
      axios.get('/api/plan-market/user/userManagerList')
        .then(response => {
          if (response.data.msg.code == 0) {
             this.xialajihe.kehujinglilists = response.data.data
          } else {
             this.$message.error(response.data.msg.info);
          }
      })
      //获取全部分销商
      axios.get('/api/gth/partner/list?page_size=2000')
        .then(response => {
          if (response.data.msg.code == 0) {
            this.xialajihe.fenxiaoshanglists = response.data.data.data
          } else {
            this.$message.error(response.data.msg.info);
          }
        })

      // //获取供应商
      // axios.get('/api/gth/supplier/list?page_size=2000')
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //       this.xialajihe.gongyingshanglists = response.data.data.data
      //     } else {
      //       this.$message.error(response.data.msg.info);
      //     }
      //   })

      // //获取销售渠道
      // axios.get('/api/form/channels?page_size=2000')
      //   .then(response => {
      //     if (response.data.msg.code == 0) {
      //       this.xialajihe.qudaolists = response.data.data.data
      //     } else {
      //       this.$message.error(response.data.msg.info);
      //     }
      //   })
    },
    mounted() {

    },
    methods: {

      daochu:function(item){

        let obj = {...this.search,...{appoint_month:item.each_month}}

        axios.post('/api/plan-market/income/time/export',obj)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功，请进入下载页查看导出进度');
              this.$router.push('/lirun/xiazai/wode')
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

      timechange:function(){
        if(this.times != null){
          this.search.start_month = this.times[0];
          this.search.end_month = this.times[1];
        }else{
          this.search.start_month = ''
          this.search.end_month = ''
        }
      },
      sousuo: function() {
        // this.search.page = 1
        this.getlist()
      },
      //翻页
      // fanye: function(page) {
      //   this.loading = true
      //   this.search.page = page
      //   this.getlist()
      // },
      changetype:function(val){

        this.search = {
          order_pages_short_ids: "", //商品名称 传商品id 多个以逗号隔开
          product_ids: "", //产品名称 传产品id 多个以逗号隔开
          supplier_name: "", //所属产品或渠道 自己输入
          start_month: "", // 开始月份 例 2025-05
          end_month: "", //结束月份 例 2025-05
          type: val, //0 我的 1分销商
          merchant_name: "", //分销商 传分销商id 【分销商才有用】
          cm_name: "", //
        }
        this.getlist()
      },
      //获取列表
      getlist: function() {
        this.loading = true
        let obj = {
          order_pages_short_ids: this.search.order_pages_short_ids.toString(), //商品名称 传商品id 多个以逗号隔开
          product_ids: this.search.product_ids.toString(), //产品名称 传产品id 多个以逗号隔开
          supplier_name: this.search.supplier_name, //所属产品或渠道 自己输入
          start_month: this.search.start_month, // 开始月份 例 2025-05
          end_month: this.search.end_month, //结束月份 例 2025-05
          type: this.search.type, //0 我的 1分销商
          merchant_name: this.search.merchant_name, //分销商 传分销商id 【分销商才有用】
          cm_name: this.search.cm_name, //
        }
        axios.get('/api/plan-market/income/time/list',{params:obj})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
              // this.total = response.data.data.total
              this.loading = false
            } else {
              this.loading = false
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>


<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";

  .lia {
    font-size: 16px;
  }
</style>
